<template>
    <div>
        <!-- 头部 -->
        <van-nav-bar title="确认订单" left-arrow @click-left="onClickLeft" />
        <div class="order-item"  v-for="item in goodsList" :key="item.userid">
        <van-card
        :num="item.num"
        :price="item.originprice"
        
        :title="item.proname"
        :thumb="item.img1"
/>
        </div>
        
        <!-- 底部 -->
        <van-submit-bar :price="totalPrice" button-text="确认订单" @submit="onSubmit" />
    </div>
</template>

<script setup lang="ts">
import { reactive ,computed} from "vue";
import {orderListAPI} from "../../api/order"
import { showNotify } from "vant";
import {useRouter , useRoute} from "vue-router"
// 获取路由对象
let $router= useRouter()
// 获取路由信息对象
let $route = useRoute()

let goodsList:Array<any> = reactive<Array<any>>([])
// 调用接口 获取订单数据
const loadOrderList = ()=>{
    orderListAPI({
        userid:localStorage.getItem("app-userid"),
        time:$route.query.time,
    }).then((res)=>{
        console.log(res);
        
        goodsList.push(...res.data.data)
        
    })
}
loadOrderList()
// 订单的总金额
let totalPrice = computed(() => {
  //   let total = 0;
  //   goodsList.forEach((item) => {
  //     total += item.originprice * item.num;
  //   });
  //   return total * 100;
  return (
    // 利用reduse方法 第一个参数 第二个参数是和
    goodsList.reduce((sum, item) => (sum += item.originprice * item.num), 0) *
    100
  );
});

// 点击提交订单 
const onSubmit = ()=>{
    showNotify({ type: "success", message: "订单已确认，需要付款" });
} 
// 返回上一页
const onClickLeft =()=>{
    $router.back()
}
</script>

<style scoped>

</style>